import React, { useEffect } from 'react'
import TestPage3 from './test2';
import {connect, useDispatch} from "react-redux";

const Testpage1 = props => {
  const { diagule, count, changePage, changeDl } = props
  useEffect(() => {
    // console.log(props)
  },[diagule])
  useEffect(() => {
    console.log(props)
  },[count])
 
  return (
    <>
    <div>|--Testpage1--- {diagule.currentPage}, {diagule.currentHl} ---- {count}</div>
    <div>
      <TestPage3></TestPage3>
    </div>
    <button onClick={changePage}>changePage</button>
    <button onClick={changeDl}>UPDATE_DL</button>
    </>
  )
}

const mapStateToProps = (state) => {
  return {
    diagule: state.diagule,
    count: state.count
  }
}


const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    changePage: () => dispatch({type: 'CHANAGE_PAGE', payload:'history'}),
    changeDl: () => dispatch({type: 'UPDATE_DL', payload:10})
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Testpage1)